<template>
	<view class="recharge">
		<view class="content">
			<view class="collMoney">
				<text class="zMOnye">贡献值凭证兑换</text>
				<view class="money">
					<text>￥</text>
					<input type="number" v-model="data.form.money" placeholder="请输入兑换贡献值凭证" />
				</view>
			</view>
			<view class="balance">
				<text class="text">我的贡献值凭证：</text>
				<text class="texts">{{$toFiexd(data.userInfo.prove,2)}}</text>
			</view>
<!-- 			<view class="balance">
				<text class="text">兑换比例:1/{{data.price}}</text>
			</view> -->
			
		</view>

		<view class="bottomMdd" @click="accounts">
			<text>兑换</text>
		</view>
		<view class="record" @click="$goURl('/pages/personal/wallet/balance')">
			<text>兑换记录</text>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		userInfo:{},			//用户信息
		form:{
			money:''
		},
		side:'',
	})
	let pluginShowing =ref(false)
	onLoad((option)=>{
		console.log('页面onLoad')
	})
	onShow(()=>{
		data.userInfo=uni.getStorageSync('userInfo')
		console.log('页面onShow')
	})
	// 点击兑换
	function accounts(){
		if(data.form.money==''){
			uni.showToast({
				icon:'none',
				title:'请输入正确的转账金额'
			})
			return
		}
		transfer()

	}
	// 兑换接口
	function transfer(){
		proxy.$request({
			url: `api/exchange/`,
			method: 'POST',
			data:{
				money:Number(data.form.money),
			},
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){

					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	.recharge{
		padding: 30upx;
		.content{
			background-color: #fff;
			border-radius: 30upx;
			overflow: hidden;
			
		}
		.collection{
			background-color: #fff;
			border-top: 1px solid #dbdbdb;
			padding: 15px 0;
			text{
				font-size: 15px;
				font-weight: 700;
				color: #333333;
				margin-left: 15px;
			}
			.people{
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding: 15px 0;
			}
		}
		.collMoney{
			padding: 15px;
			margin-top: 10px;
			.zMOnye{
				font-size: 15px;
				font-weight: 700;
				color: #333333;
			}
			.money{
				display: flex;
				margin-top: 10px;
				border-bottom: 1px solid #f5f5f5;
				padding: 10px 0;
			}
			
		}
		.balance{
			display: flex;
			padding:0 20px 20px 20px;
			background-color: #fff;
			.text{
				font-size: 28rpx;
				color: #333;
				font-weight: 700;
			}
			.texts{
				font-size: 30rpx;
				color: #333;
				font-weight: 700;
			}
		}
		.bottomMdd{
			margin-top: 30upx;
			text-align: center;
			background-color: $color1;
			border-radius: 30upx;
			padding: 10px 0;
			text{
				color: #fff;
				font-size: 30rpx;
			}
		}
		.record{
			text-align: center;
			margin-top: 30upx;
			text{
				color: #333;
				font-size: 28rpx;
			}
		}
	}
</style>